Funktionelle Bilder: Icons
Letztes Update:
13. Dezember 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Links und Buttons zählen zu den wichtigsten Interaktionselementen. Sie ermöglichen es den Nutzern rasch und einfach zwischen Informationen zu wechseln oder Interaktionen zu starten.
Icons sind stark vereinfachte Darstellungen eines Objektes oder Vorgangs.
Als derartiges Symbol werden sie auf digitalen Plattformen mit der Funktion eines Buttons bzw. Links eingesetzt.
Wann kommt dieses Element zum Einsatz?
Icons (mit und ohne Funktion) bieten dem Nutzer etwas an. Das bedeutet aber auch Aufwand für den Nutzer. Dieser muss erst wahrnehmen und überlegen was das Icon bedeutet, ob eine Funktion dahintersteht und ob ihn diese interessiert. Jedes Icon birgt somit auch die Gefahr dass der Nutzer abspringt. Damit hätten wir ihn auf der jeweiligen Seite mit ihrer Zielsetzung verloren und das Nutzererlebnis ist unterbrochen. Deshalb sollen Icons (mit und ohne Funktion) überlegt eingesetzt werden! Sie müssen zur Zielsetzung der Seite passen!
UX Konzeption
- Icons müssen einfach und schnell dekodiert werden können. Der dahinterliegende Informationsgehalt muss den Nutzern klar sein.
- Ein (1) Icon darf nicht für mehrere unterschiedliche Zwecke verwendet werden.
- Die hier zur Verfügung gestellten Icons müssen verwendet werden – es dürfen keine anderen zum Einsatz gebracht werden.
- Icons, die als Button zum Einsatz kommen, müssen mit dem aria-label=“name“ gelabelt werden.
- Kommt das Icon als zustätzliche Darstellungsform zu einem Link oder Button zum Einsatz, muss mit aria-hidden=“true“ gelabelt werden. Somit ist das redundante Element verborgen.
- Es muss eine Textalternative in Form eines Alt-Textes vorhanden sein.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
UX-Writing
Was ist zu texten
- Icon-Alternativtext
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
Alt-Texte für funktionale Bilder (Icons, Interaktionselemente…)
- klar, eindeutig, für Nutzer und Suchmaschinen lesbare Benennungen
- kurze Texte die den jeweilige Funktion beschreiben
- Worte sollen nicht mit Minus oder Underline getrennt werden
- Maximal 100 Zeichen